<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="marginTop">
      <el-breadcrumb-item >公司代理商合同拟定</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- table表格区域 -->
    <el-table :data="list" border stripe style="width: 100%" class="marginTop">
      <!-- 展开行 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <!-- {{scope.row}} -->
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="公司审核结果">
              <span>{{ props.row.corperationOutcome }}</span>
            </el-form-item>
            <el-form-item label="部门审核结果">
              <span>{{ props.row.departmentOutcome }}</span>
            </el-form-item>
            <el-form-item label="流程名">
              <span>{{ props.row.processName }}</span>
            </el-form-item>
            <el-form-item label="流程id">
              <span>{{ props.row.processId }}</span>
            </el-form-item>
            <el-form-item label="发起人">
              <span>{{ props.row.INITIATOR }}</span>
            </el-form-item>
            <el-form-item label="名字">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="身份证号">
              <span>{{ props.row.number }}</span>
            </el-form-item>
            <el-form-item label="联系方式">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="邮箱">
              <span>{{ props.row.email }}</span>
            </el-form-item>
            <el-form-item label="起始时间">
              <span>{{ props.row.startTime }}</span>
            </el-form-item>
            <el-form-item label="任务名">
              <span>{{ props.row.taskName }}</span>
            </el-form-item>
            <el-form-item label="任务id">
              <span>{{ props.row.taskId }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column label="流程名" prop="processName"></el-table-column>
      <el-table-column label="任务名" prop="taskName" width="200px"></el-table-column>
      <el-table-column label="起始时间" prop="startTime" width="200px"></el-table-column>
      <el-table-column label="发起人" prop="INITIATOR" width="200px"></el-table-column>
      <el-table-column fixed="right" label="操作" width="230px">
        <template slot-scope="scope">
          <el-button  type="primary" @click="createContract(scope.row)">拟定合同</el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-card>

    <!--    合同拟定弹出框-->
    <el-dialog title="合同拟定" :visible.sync="DialogVisible" width="40%"  @close="DialogClose">
      <el-form :model="contract"  ref="FormRef" label-width="100px">
        <el-form-item label="合同名称">
          <el-input v-model="contract.title"></el-input>
        </el-form-item>
        <el-form-item label="上传合同">
          <el-upload
            class="upload-demo"
            ref="upload"
            action=""
            :on-success="handleSuccess"
            :http-request="fnUploadRequest"
            :auto-upload="false"
          >
            <el-button slot="trigger"  type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;"  type="success" @click="submitUpload">上传到服务器</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传合同">
          <el-input v-model="contract.url" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadContract">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  //引入 ali-oss 插件并配置：
  const OSS = require('ali-oss');
  const client= new OSS({
    accessKeyId: 'LTAI5tMBQMVjSzQhJsesBDBS',  // 阿里云KEY
    accessKeySecret: 'hAsKyZgX32oyPdEA1j4HMpzF3SouJM', // 阿里云KEYSECRET
    bucket: 'contracts-storage', // OSS bucket 名称
    region: 'oss-cn-chengdu', // bucket 所在地址
    //cname:true, // 开启自定义域名上传
    endpoint:"oss-cn-chengdu.aliyuncs.com" //域名
  });
  export default {
    name: "user",
    data() {
      return {
        list:[],
        DialogVisible:false,
        contract:{
          username:'',
          title:'',
          url:'',
          taskId:''
        }
      };
    },
    mounted() {
      this.getInfoList();
    },
    methods: {
      //获取数据
      async getInfoList() {
        let { data: res } = await this.$http.get("/admin/corporation/trackall")
        let changeList=[]
        for(let i=0;i<res.data.length;i++){
          if(res.data[i].processName==="代理商申请流程"&&res.data[i].taskName==='合同拟定'){
            changeList.push(res.data[i])
          }
        }
        this.list=changeList
      },
      DialogClose(){
        this.$refs.FormRef.resetFields()
      },
      createContract(task){
        this.DialogVisible=true;
        this.contract.username=task.INITIATOR
        this.contract.taskId=task.taskId
      },
      //上传成功
      handleSuccess(res) {
        if(res) {
          this.contract.url = res.url
          console.log(res.url)
        }
      },
      //上传文件
      async fnUploadRequest(options) {
        try {
          let file = options.file; // 拿到 file
          let fileName = file.name
          let date = new Date().getTime()
          let fileNames = `${date}_${fileName}` // 拼接文件名，保证唯一，这里使用时间戳+原文件名
          // 上传文件,这里是上传到OSS的 uploads文件夹下
          client.put("uploads/"+fileNames, file).then(res=>{
            if (res.res.statusCode === 200) {
              options.onSuccess(res)
            }else {
              options.onError("上传失败")
            }
          })
        }catch (e) {
          options.onError("上传失败")
        }
      },
     async uploadContract() {
        if(this.contract.url === '') {
          return this.$message.error('请先上传合同')
        }
        await this.$http.post('/admin/corporation/contract', this.contract).then(res => {
          this.$message.success('成功')
        })
        this.DialogVisible=false
        this.getInfoList()
      },
      submitUpload() {
        this.$refs.upload.submit();
      }
    }
  };
</script>

<style lang="less">
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 120px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 80%;
  }
  .marginTop{
    margin-top: 10px;
  }
</style>
